<template>
	<!-- 我是工具箱 -->
	<div id="container">
		<el-dropdown
			trigger="click"
			:class="isChosen == true ? 'chosen' : ''"
			@command="handleCommand"
		>
			<span class="el-dropdown-link title">
				工具箱
				<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="1">
					<img src="img/测量.png" alt="" />
					测量距离
				</el-dropdown-item>
				<el-dropdown-item command="2">
					<img src="img/全部面积.png" alt="" />
					测量面积
				</el-dropdown-item>
				<el-dropdown-item command="3">
					<img src="img/地图.png" alt="" />
					导出图片
				</el-dropdown-item>
				<el-dropdown-item command="4">
					<img src="img/关闭_操作_jurassic.png" alt="" />
					关闭测量
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>

<script>
var map;
var draw;
var source;
var canvas;
/**
 * 当前绘制的要素（Currently drawn feature.）
 * @type {ol.Feature}
 */
var sketch;
/**
 * 帮助提示框对象（The help tooltip element.）
 * @type {Element}
 */
var helpTooltipElement;
/**
 *帮助提示框显示的信息（Overlay to show the help messages.）
 * @type {ol.Overlay}
 */
var helpTooltip;
/**
 * 测量工具提示框对象（The measure tooltip element. ）
 * @type {Element}
 */
var measureTooltipElement;
/**
 *测量工具中显示的测量值（Overlay to show the measurement.）
 * @type {ol.Overlay}
 */
var measureTooltip;
/**
 *  当用户正在绘制多边形时的提示信息文本
 * @type {string}
 */
var continuePolygonMsg = '单击开始绘制，双击结束面积测量';
var continueLineMsg = '单击开始绘制，双击结束距离测量';
// import { mapState } from 'vuex';
export default {
	name: 'Tools',
	data() {
		return {
			isChosen: false,
		};
	},
	// computed: { ...mapState(['map', 'docLayer']) },
	mounted() {
		this.$nextTick(() => {
			map = this.$store.state.map;
			//加载测量的绘制矢量层
			source = new ol.source.Vector(); //图层数据源
			var vector = new ol.layer.Vector({
				source: source,
				style: new ol.style.Style({
					//图层样式
					fill: new ol.style.Fill({
						color: 'rgba(255, 30, 18, 0.2)', //填充颜色
					}),
					stroke: new ol.style.Stroke({
						color: 'blue', //边框颜色
						width: 5, // 边框宽度
					}),
					image: new ol.style.Circle({
						radius: 7,
						fill: new ol.style.Fill({
							color: 'blue',
						}),
					}),
				}),
			});
			map.addLayer(vector);
		});
	},
	methods: {
		handleCommand(command) {
			if (command == '1') {
				this.isChosen = true;
				let measuretype = 'line';
				this.activeMeasure(measuretype);
			} else if (command == '2') {
				this.isChosen = true;
				let measuretype = 'area';
				this.activeMeasure(measuretype);
			} else if (command == '3') {
				this.isChosen = true;
				this.exportMap();
			} else {
				this.isChosen = false;
				this.remove();
			}
		},
		// 激活测量
		activeMeasure(measuretype) {
			var that = this;
			map.removeInteraction(draw);
			/**
			 * 鼠标移动事件处理函数
			 * @param {ol.MapBrowserEvent} evt
			 */
			var pointerMoveHandler = function (evt) {
				if (evt.dragging) {
					return;
				}
				/** @type {string} */
				var helpMsg = '点击开始绘制'; //当前默认提示信息
				//判断绘制几何类型设置相应的帮助提示信息
				if (sketch) {
					var geom = sketch.getGeometry();
					if (geom instanceof ol.geom.Polygon) {
						helpMsg = continuePolygonMsg; //绘制多边形时提示相应内容
					} else if (geom instanceof ol.geom.LineString) {
						helpMsg = continueLineMsg; //绘制线时提示相应内容
					}
				}
				helpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
				helpTooltipElement.style.color = 'red';
				helpTooltip.setPosition(evt.coordinate); //设置帮助提示框的位置
				// document.getElementsByName(helpTooltipElement).removeClass("hidden"); //移除帮助提示框的隐藏样式进行显示
			};
			map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
			// var geodesicCheckbox = document.getElementById("geodesic"); //测地学方式对象
			// global so we can remove it later
			var type = measuretype == 'area' ? 'Polygon' : 'LineString';
			draw = new ol.interaction.Draw({
				source: source, //测量绘制层数据源
				type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
				style: new ol.style.Style({
					//绘制几何图形的样式
					fill: new ol.style.Fill({
						color: 'rgba(255, 255, 255, 0.1)',
					}),
					stroke: new ol.style.Stroke({
						color: 'dodgerblue',
						lineDash: [10, 10],
						width: 2,
					}),
					image: new ol.style.Circle({
						radius: 5,
						stroke: new ol.style.Stroke({
							color: 'rgba(255, 30, 0, 0.7)',
						}),
						fill: new ol.style.Fill({
							color: 'rgba(255, 255, 255, 0.2)',
						}),
					}),
				}),
			});
			map.addInteraction(draw);
			createMeasureTooltip(); //创建测量工具提示框
			createHelpTooltip(); //创建帮助提示框

			var listener;
			//绑定交互绘制工具开始绘制的事件
			draw.on(
				'drawstart',
				function (evt) {
					// set sketch
					sketch = evt.feature; //绘制的要素

					/** @type {ol.Coordinate|undefined} */
					var tooltipCoord = evt.coordinate; // 绘制的坐标
					//绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
					listener = sketch.getGeometry().on('change', function (evt) {
						var geom = evt.target; //绘制几何要素
						var output;
						if (geom instanceof ol.geom.Polygon) {
							output = formatArea(/** @type {ol.geom.Polygon} */ (geom)); //面积值
							tooltipCoord = geom.getInteriorPoint().getCoordinates(); //坐标
						} else if (geom instanceof ol.geom.LineString) {
							output = formatLength(/** @type {ol.geom.LineString} */ (geom)); //长度值
							tooltipCoord = geom.getLastCoordinate(); //坐标
						}
						measureTooltipElement.innerHTML = output; //将测量值设置到测量工具提示框中显示
						measureTooltipElement.style.color = 'red';

						measureTooltip.setPosition(tooltipCoord); //设置测量工具提示框的显示位置
					});
				},
				this
			);
			//绑定交互绘制工具结束绘制的事件
			draw.on(
				'drawend',
				function (evt) {
					measureTooltipElement.className = 'tooltip tooltip-static'; //设置测量提示框的样式
					measureTooltipElement.style.background = '#2196f3';
					measureTooltipElement.style.padding = '10px 10px';
					measureTooltip.setOffset([0, -7]);
					sketch = null; //置空当前绘制的要素对象
					// unset tooltip so that a new one can be created
					measureTooltipElement = null; //置空测量工具提示框对象
					createMeasureTooltip(); //重新创建一个测试工具提示框显示结果
					ol.Observable.unByKey(listener);
				},
				this
			);

			/**
			 *创建一个新的帮助提示框（tooltip）
			 */
			function createHelpTooltip() {
				if (helpTooltipElement) {
					helpTooltipElement.parentNode.removeChild(helpTooltipElement);
				}
				helpTooltipElement = document.createElement('div');
				helpTooltipElement.className = 'tooltip hidden';
				helpTooltip = new ol.Overlay({
					element: helpTooltipElement,
					offset: [15, 0],
					positioning: 'center-left',
				});
				map.addOverlay(helpTooltip);
			}
			/**
			 *创建一个新的测量工具提示框（tooltip）
			 */
			function createMeasureTooltip() {
				if (measureTooltipElement) {
					measureTooltipElement.parentNode.removeChild(measureTooltipElement);
				}
				measureTooltipElement = document.createElement('div');
				measureTooltipElement.className = 'tooltip tooltip-measure';
				measureTooltip = new ol.Overlay({
					element: measureTooltipElement,
					offset: [0, -15],
					positioning: 'bottom-center',
				});
				map.addOverlay(measureTooltip);
			}
			/**
			 * 测量长度输出
			 * @param {ol.geom.LineString} line
			 * @return {string}
			 */
			var formatLength = function (line) {
				var length;
				var sphere = new ol.Sphere();
				//若使用测地学方法测量
				var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系
				length = sphere.getLength(line, {
					projection: sourceProj,
					radius: 6378137,
				});
				// length = Math.round(line.getLength() * 100) / 100; //直接得到线的长度
				var output;
				if (length > 100) {
					output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'; //换算成KM单位
				} else {
					output = Math.round(length * 100) / 100 + ' ' + 'm'; //m为单位
				}
				return output; //返回线的长度
			};
			/**
			 * 测量面积输出
			 * @param {ol.geom.Polygon} polygon
			 * @return {string}
			 */
			var formatArea = function (polygon) {
				var area;
				var sphere = new ol.Sphere();

				//若使用测地学方法测量
				var sourceProj = map.getView().getProjection(); //地图数据源投影坐标系
				var geom = /** @type {ol.geom.Polygon} */ (
					polygon.clone().transform(sourceProj, 'EPSG:4326')
				); //将多边形要素坐标系投影为EPSG:4326
				area = Math.abs(
					sphere.getArea(geom, { projection: sourceProj, radius: 6378137 })
				); //获取面积

				// area = polygon.getArea(); //直接获取多边形的面积

				var output;
				if (area > 10000) {
					output =
						Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'; //换算成KM单位
				} else {
					output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'; //m为单位
				}
				return output; //返回多边形的面积
			};
		},
		remove() {
			console.log(draw);
			map.removeInteraction(draw);
			source.clear();
			var paras = document.getElementsByClassName(
				'ol-overlay-container ol-selectable'
			);
			for (var i = paras.length; i >= 0; i--) {
				//删除元素 元素.parentNode.removeChild(元素);
				if (paras[i] != null) paras[i].parentNode.removeChild(paras[i]);
			}
		},
		exportMap() {
			map.once('postcompose', function (event) {
				const canvas = event.context.canvas;
				console.log(canvas);
				canvas.toBlob(function (blob) {
					console.log(blob);
					saveAs(blob, 'map.png');
				});
			});
			map.renderSync();
		},
	},
};
</script>

<style scoped>
.chosen {
	/* 激活菜单样式 */
	background-color: antiquewhite !important;
	color: darkcyan !important;
}
.el-dropdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 5px;
	z-index: 11;
	border-radius: 10px;
	border-bottom: 2px solid white;
	font-size: 16px;
	font-weight: 500;
	background-color: rgba(248, 248, 132, 0.7);
}

.title {
	font-size: 18px;
}
.el-dropdown:hover {
	cursor: pointer;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
}
.el-dropdown-menu {
	background-color: whitesmoke;
	font-weight: 900;
}
</style>
